<template>
	<view class="content">
		<uni-grid class="func-menu" :column="2" :square="true">
			<uni-grid-item v-for="(item, i) in communitys" :key="i">
				<view class="menu-item">
					<image :src="item.img" mode="widthFix"></image>
					<text class="text">{{ item.txt }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
export default {
	data() {
		return {
			communitys: [
				{ lid: 1, img: '/static/img/cart.png', txt: '社区商城' },
				{ lid: 2, img: '/static/img/hospital.png', txt: '社区医疗' },
				{ lid: 3, img: '/static/img/tree.png', txt: '邻里互动' },
				{ lid: 4, img: '/static/img/news.png', txt: '社区活动' },
				{ lid: 5, img: '/static/img/list.png', txt: '便民服务' },
				{ lid: 5, img: '/static/img/earth.png', txt: '志愿服务' }
			]
		};
	},
	onload() {},
	methods: {
		d() {
			console.log(this.communitys);
		}
	}
};
</script>

<style lang="scss">
.func-menu {
	background-color: $uni-bg-color;

	.menu-item {
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		> image {
			width: 35%;
			margin-bottom: $uni-spacing-col-lg;
		}
	}
}
</style>
